<template>
  <PageWrapper title="单号：234231029431" contentBackground headerSticky>
    <template #extra>
      <a-button> 操作一 </a-button>
      <a-button> 操作二 </a-button>
      <a-button type="primary"> 主操作 </a-button>
    </template>

    <template #footer>
      <Tabs default-active-key="1">
        <Tabs.TabPane key="1" tab="项目概况" />
        <Tabs.TabPane key="2" tab="预警建议" />
      </Tabs>
    </template>

    <div class="pt-4 m-4 desc-wrap">
      <Descriptions size="small" :column="2">
        <Descriptions.Item label="创建人">Landslide</Descriptions.Item>
        <Descriptions.Item label="项目类型">基坑边坡</Descriptions.Item>
        <Descriptions.Item label="创建时间"> 2024-01-10 </Descriptions.Item>
        <Descriptions.Item label="关联单据">
          <a>12421</a>
        </Descriptions.Item>
        <Descriptions.Item label="监测时间"> 2024-01-10 ~ 2024-08-08 </Descriptions.Item>
        <Descriptions.Item label="备注"> 高层建筑边坡重要性程度：中 </Descriptions.Item>
      </Descriptions>
      <Card title="项目情况" :bordered="false">
        <Steps :current="1" progress-dot size="small">
          <Steps.Step title="监测设备安装">
            <template #description>
              <div>Landslide</div>
              <p>2023-12-12 12:32</p>
            </template>
          </Steps.Step>
          <Steps.Step title="实时监测">
            <template #description>
              <div>User</div>
              <p>2024-01-10 11:32</p>
            </template>
          </Steps.Step>
          <Steps.Step title="数据告警" />
          <Steps.Step title="现场处理" />
        </Steps>
      </Card>

      <Card title="项目信息" :bordered="false" class="mt-5">
        <Descriptions :column="3">
          <Descriptions.Item label="项目用户"> 湖南省XX集团 </Descriptions.Item>
          <Descriptions.Item label="项目类型"> 2号基坑边坡 </Descriptions.Item>
          <Descriptions.Item label="项目编号"> XX-XX-02 </Descriptions.Item>
          <Descriptions.Item label="联系方式"> 18112345678 </Descriptions.Item>
          <Descriptions.Item label="项目位置" :span="2">
            湖南省长沙市文源街道湖南铁院土木检测公司 （XX.XX°N,XX.XX°E）
          </Descriptions.Item>
        </Descriptions>

        <Descriptions title="信息组" :column="3">
          <Descriptions.Item label="某某数据"> 111 </Descriptions.Item>
          <Descriptions.Item label="该数据更新时间"> 2017-08-08 </Descriptions.Item>
          <Descriptions.Item label="某某数据"> 725 </Descriptions.Item>
          <Descriptions.Item label="该数据更新时间"> 2017-08-08 </Descriptions.Item>
        </Descriptions>

        <h4>信息组</h4>
        <Card title="多层级信息组">
          <Descriptions title="组名称" :column="3">
            <Descriptions.Item label="负责人"> 林东东 </Descriptions.Item>
            <Descriptions.Item label="角色码"> 1234567 </Descriptions.Item>
            <Descriptions.Item label="所属部门"> XX公司 - YY部 </Descriptions.Item>
            <Descriptions.Item label="过期时间"> 2017-08-08 </Descriptions.Item>
            <Descriptions.Item label="描述" :span="2">
              这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
            </Descriptions.Item>
          </Descriptions>
          <Divider />
          <Descriptions title="组名称" :column="1">
            <Descriptions.Item label="学名">
              Citrullus lanatus (Thunb.) Matsum. et
              Nakai
            </Descriptions.Item>
          </Descriptions>
          <Divider />
          <Descriptions title="组名称" :column="1">
            <Descriptions.Item label="负责人"> 付小小 </Descriptions.Item>
            <Descriptions.Item label="角色码"> 1234568 </Descriptions.Item>
          </Descriptions>
        </Card>
      </Card>
      <Card title="项目测点布置" class="my-5">
        <div class="image_container">
        <img style="width: 50%" :src="imageSrc" alt="测点布置" />
        </div>
        <div class="discribe">测点布置图</div>
      </Card>
      <BasicTable @register="registerTimeTable" />
      </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable } from '@/components/Table';
  import { PageWrapper } from '@/components/Page';
  import { Divider, Card, Empty, Descriptions, Steps, Tabs } from 'ant-design-vue';

  import { refundTimeTableSchema, refundTimeTableData } from './data';
  const imageSrc = new URL('./1.png', import.meta.url).href;
  const [registerTimeTable] = useTable({
    title: '监测数据',
    columns: refundTimeTableSchema,
    pagination: false,
    dataSource: refundTimeTableData,
    showIndexColumn: false,
    scroll: { y: 300 },
  });
</script>
<style lang="less" scoped>
.image_container{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin: 0;
}
img {
  max-width: 100%; /* 确保图片不会超过其容器 */
  height: auto; /* 保持图片比例 */
}
.discribe{
  text-align:center;
}
</style>